compiler diff 原理

• 模版编译 优先级 render > template > el
  • template 生成 ast 树【用对象描述 JS 语法】，在生成 render 函数，然后挂载元素。
  • _render 调用 render 函数，拿到虚拟 DOM，_update 生成真实 DOM

首先将我们的模版 template 转化成对象，在转化成可执行的 h crateElement 函数， 调用 render 方法将结点转化成 ast 虚拟 DOM 树， 在更新树的时候，进行 Diff 算法，对新旧值进行比对。

Diff 算法是一种 新旧结点更新的优化，利用了双指针。 先头和头、尾和尾、在老尾对应新头、老头对应新闻尾、存在的移动，不存在的新增，是的操作 dom 更新渲染变小。它的时间复杂度是 O(n)，两颗树的完全比对 时间复杂度是 O(n3)，vue 进行了优化，因为很少跨层级的操作移动 DOM, 所以只会比同一层级的 Vritual DOM。